<%= settings_layout do %>
  <%= content_for :title, "Team Members" %>
  <%= turbo_stream_from [:account_users, current_account] %>

  <div>
    <div>
      <h2 class="text-2xl font-bold">Team Members</h2>
      <div class="flex text-sm">
        <div class="flex items-center gap-1">
          <iconify-icon icon="lucide:building"></iconify-icon>
          <%= current_account.name %>
        </div>
        <div class="flex items-center ml-4 gap-1">
          <iconify-icon icon="lucide:users"></iconify-icon>
          <%= current_account.users.count %> Member<%= "s" if current_account.users.count != 1 %>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <div role="tablist" class="tabs tabs-bordered mt-5">
      <%= link_to account_users_path, role: "tab", class: "tab tab-active" do %>
        Members
      <% end %>
      <%= link_to teams_path, role: "tab", class: "tab" do %>
        Teams
      <% end %>
    </div>

    <div class="mt-5">
      <div aria-label="Card" class="card card-bordered bg-base-100">
        <div class="card-body">
          <div class="text-right px-5 pt-5">
              <!--  Start: User Action -->
               <button class="btn btn-primary btn-sm" onclick="team_member_modal.showModal()">
                  <iconify-icon icon="lucide:plus" height="16"></iconify-icon>
                  <span class="hidden sm:inline">Add Team Member</span>
                </button>
              <!--  End: User Action -->
              </div>

          <div>
            <%= tag.div id: ("account_users" if @pagy.page == 1) do %>
              <%= render "accounts/account_users/index", account_users: @account_users, cached: true %>
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <%= render 'shared/pagination', pagy: @pagy %>
  </div>

  <!-- Start: Click Outside Modal -->
  <dialog aria-label="Modal" class="modal" id="team_member_modal">
    <div class="modal-box">
      <form method="dialog">
        <button aria-label="Close modal" class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">
          <iconify-icon icon="lucide:x" height="16"></iconify-icon>
        </button>
      </form>
      <div class="mb-4 w-full text-xl font-bold">Invite Team Member to <%= current_account.name %></div>
      <div>
        <%= form_with(model: User.new, url: account_users_path) do |form| %>
          <div class="form-control mt-1 w-full">
            <label class="label">
              <span class="label-text">Email</span>
            </label>
            <%= form.text_field :email, type: :email, class: "input input-bordered w-full focus:outline-offset-0" %>
            <label class="label">
              <span class="label-text-alt">Use the email associated with their Canine account.</span>
            </label>
          </div>
          <div class="form-footer">
            <%= form.button "Invite", class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
    <form method="dialog" class="modal-backdrop">
      <button>close</button>
    </form>
  </dialog>
  <!-- End: Click Outside Modal -->
<% end %>